<template>
	<view class="nav">
		<view :style="'height:' + status + 'rpx;' + containerStyle"></view>
		<view v-if="isHome" class="headNav" :style="'height:' + navHeight + 'rpx; '">
				<text class="city">聚分鸟 AT bird</text>
				<navigator class="navigators"
					url="../../pages/search/index"
					:style=" 
						'height:' +
						menu.height*2 +
						'rpx;line-height:' +
						menu.height*2 +
						'rpx;margin-top:' + 
						(menu.top*2 - status) +
						'rpx;background: #f4f4f4;border-radius:200rpx;text-align:center'
					"
				>
					<text class="search-text"></text>
				</navigator>

		</view>
		<view v-else class="navbar" :style="'height:' + navHeight + 'rpx;' + containerStyle">
			<view class="back-icon" @click="backOrHome">
				<image v-if="pages > 1" src="../../static/navbar/ic_back.png"></image>
				<image v-if="pages > 1" src="../../static/navbar/ic_back.png"></image>
				<image v-else src="../../static/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:' + navHeight + 'rpx;line-height:'+ navHeight + 'rpx;' + textStyle">{{titleText}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, onBeforeMount } from 'vue'
	const props = defineProps({
		background: {
			type: String,
			default: 'rgba(255, 255, 255, 1)'
		},
		color: {
			type: String,
			default: 'rgba(0, 0, 0, 1)'
		},
		fontSize: {
			type: String,
			default: '32'
		},
		iconWidth: {
			type: String,
			default: '116'
		},
		iconHeight: {
			type: String,
			default: '38'
		},
		titleText: {
			type: String,
			default: ''
		},
		isHome: {
			type: Boolean,
			default: false
		}
	})
	const emits = defineEmits(['navBarAttached'])

	// 状态栏高度
	const status = ref(0)
	// 内容高度
	const navHeight = ref(0)
	// 背景颜色
	const containerStyle = ref('')
	// 字体样式
	const textStyle = ref('')
	// 图标的样式
	const iconStyle = ref('')
	// 页面栈的数量
	const pages = ref(getCurrentPages().length)
	const width = ref(100)
	// 获取到胶囊的位置
	
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
	
	// 计算状态栏高度
	const setNavSize = () => {
		const { system, statusBarHeight } = uni.getSystemInfoSync()
		status.value = statusBarHeight * 2
		const isiOS = system.indexOf('iOS') > -1
		if (!isiOS) {
			navHeight.value = 96
		} else {
			navHeight.value = 88*2
		}
		// console.log(res)
	}
	// 样式设置
	const setStyle = () => {
		containerStyle.value = ['background:' + props.background].join(';')
		textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';')
		iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(';')
	}
	const backOrHome = () => {
		console.log('c');
		if (pages.value > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/home/home'
			})
		}
	}
	
	onBeforeMount(() => {
		setNavSize()
		setStyle()
		emits('navBarAttached', {
			detail: {
				statusHeight: status.value,
				navHeight: navHeight.value,
				navBarHeight: status.value + navHeight.value
			}
		})
		
	})
</script>

<style>
	.nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.back-icon {
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
		margin-left: 20rpx;
	}
	.back-icon image {
		width: 64rpx;
		height: 64rpx;
	}
	.navbar {
		position: relative;
	}
	.nav-title {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}
	.headNav {
		/* display: flex; */
		    display: flex;
		    justify-content: center;
		    flex-direction: column;
		    align-items: center;
	}
	.city {
	    display: inline-block;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bold;
	    /* padding-left: 55rpx; */

	    background-size: 40rpx;
	}
	
	.navigators{
		margin-top: 10rpx;
		width: 94%;
	}

</style>